<template>
  <li class="order_list_li">
    <img :src="image_url" class="restaurant_image" />
    <section class="order_item_right">
      <header class="order_item_right_header">
        <section class="order_header" @click="gotoDetail(order_id)">
          <h4>
            <span class="ellipsis">{{ restaurant_name }}</span>
          </h4>
          <p class="order_time">{{ order_create_time }}</p>
        </section>
        <p class="order_status">{{ status_title }}</p>
      </header>
      <section class="order_basket" @click="gotoDetail(order_id)">
        <p class="order_name ellipsis">
          {{ dish_name[0].name }}
          <span class="more" v-if="total_quantity > 1">
            等{{ total_quantity }}件商品
          </span>
        </p>
        <p class="order_amount">¥{{ total_amount }}</p>
      </section>
      <div class="order_again" data="order_id">
        <van-tag
          plain
          type="warning"
          v-if="new Date().valueOf() - time_pass <= 15 * 60 * 1000"
          @click="pay(order_id)"
        >
          去支付(还剩
          <van-count-down
            :time="15 * 60 * 1000 - (new Date().valueOf() - time_pass)"
            format=" mm 分 ss 秒"
          />）
        </van-tag>
        <van-tag
          plain
          type="primary"
          v-if="new Date().valueOf() - time_pass >= 15 * 60 * 1000"
          @click="buyAgain(restaurant_id)"
        >
          再来一单
        </van-tag>
        <van-dialog
          v-model="show"
          theme="round-button"
          confirmButtonColor="#4cd964"
        >
          <div class="msg">
            <div class="tip_icon">
              <span class="tip1"></span>
              <span class="tip2"></span>
            </div>
            暂不开放支付功能！
          </div>
        </van-dialog>
      </div>
    </section>
  </li>
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      show: false
    }
  },
  props: {
    order_id: {
      type: Number,
      default: 0
    },
    image_url: {
      type: String,
      default: ""
    },
    restaurant_id: {
      type: Number,
      default: 0
    },
    restaurant_name: {
      type: String,
      default: ""
    },
    order_create_time: {
      type: String,
      default: ""
    },
    time_pass: {
      type: Number,
      default: 0
    },
    status_title: {
      type: String,
      default: ""
    },
    total_quantity: {
      type: Number,
      default: 0.0
    },
    total_amount: {
      type: Number,
      default: 0
    },
    dish_name: {
      type: []
    }
  },
  methods: {
    //支付
    pay(order_id) {
      this.show = true
    },
    //再来一单
    buyAgain(id) {
      console.log(id)
      this.$router.push("/browerStore/" + id)
    },
    //去往详情页
    gotoDetail(order_id) {
      // 通过编程式导航 API，导航跳转到指定的页面
      //this.$router.push("/orderDetail?id=" + order_id)
      this.$router.push("/orderDetail/" + order_id)
    }
  }
}
</script>

<style lang="less">
h4,
p {
  margin: 0;
}
.order_list_li {
  list-style: none;
  display: flex;
  background-color: #fff;
  margin-bottom: 0.75rem;
  padding: 1.2rem 0.8rem 0;
  .restaurant_image {
    width: 3rem;
    height: 3rem;
    margin-right: 0.6rem;
  }
  .order_item_right {
    flex: 5;
    .order_item_right_header {
      border-bottom: 0.025rem solid #f5f5f5;
      padding-bottom: 0.3rem;
      display: flex;
      justify-content: space-between;
      h4 {
        display: flex;
        font-weight: 400;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.1rem;
        font-style: normal;
        color: #333;
        line-height: 2rem;
        width: 9rem;
        font-style: normal;
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        svg {
          width: 0.4rem;
          height: 0.4rem;
          fill: #ccc;
          margin-right: 0.2rem;
        }
      }
      .order_time {
        text-align: left;
        font-size: 0.55rem;
        color: #999;
        line-height: 0.8rem;
      }
      .order_status {
        font-size: 0.6rem;
        color: #333;
      }
    }
    .order_basket {
      display: flex;
      justify-content: space-between;
      line-height: 2.75rem;
      border-bottom: 0.025rem solid #f5f5f5;
      .order_name {
        text-align: left;
        font-size: 0.8rem;
        color: #666;
        width: 10rem;
      }
      .order_amount {
        font-size: 0.8rem;
        color: #f60;
        font-weight: 700;
      }
    }
    .order_again {
      text-align: right;
      line-height: 2rem;
      .rem_time {
        font-size: 0.6rem;
        color: orange;
        border-width: 1px;
        border-style: solid;
        border-color: orange;
      }
      .buy_again {
        font-size: 0.55rem;
        color: #3190e8;
        border: 0.025rem solid #3190e8;
        padding: 0.1rem 0.2rem;
        border-radius: 0.15rem;
      }
    }
  }
}
.msg {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tip_icon {
  width: 5rem;
  height: 5rem;
  border: 0.25rem solid #f8cb86;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .tip1 {
    width: 0.25rem;
    height: 2.5rem;
    background-color: #f8cb86;
  }
  .tip2 {
    width: 0.3rem;
    height: 0.3rem;
    border: 1px;
    border-radius: 50%;
    margin-top: 0.2rem;
    background-color: #f8cb86;
  }
}
</style>
